Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 (John Pyers' Library) by Dan Cederholm

Author:Dan Cederholm
Language: eng
Format: epub
Publisher: New Riders
Published: 2012-04-16T04:00:00+00:00

To fix this, we’ll add border-radius rules to the heading declaration as well, rounding only the top-left and -right corners. This will make a smooth rounded top for the whole module.

.box h3 {

margin: 0;

padding: 6px 8px 4px 10px;

font-size: 130%;

color: #333;

border-bottom: 1px solid #E0CFAB;

background: rgb(250,247,241); /* Old browsers */

background: -moz-linear-gradient(top, rgba(250,247,241,1) 0%, rgba(237,228,208,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,247,241,1)), color-stop (100%,rgba(237,228,208,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba (250,247,241,1) 0%,rgba(237,228,208,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(250,247,241,1) 0%,rgba(237,228,208,1) 100%); /* Opera11.10+ */

background: -ms-linear-gradient(top, rgba(250,247,241,1) 0%,rgba(237,228,208,1) 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#FAF7F1', endColorstr='#EDE4D0', GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, rgba(250,247,241,1) 0%,rgba(237,228,208,1) 100%); /* W3C */

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

}

Figure 5.19 shows the finished box rendered in Safari, now using zero images with the rounded corners and gradient powered completely with CSS3.

Figure 5.19 The finished box design, powered completely by CSS.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.